<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Chat</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="toggleChatMenu()">
        <ion-icon slot="icon-only" name="people"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-row class="chat-container">
    <ion-col class="chat-area">

      <ion-row class="motd-area">
        <ion-col [innerHTML]="gameService.gameSettings.motd || 'No MOTD set' | linkify"></ion-col>
      </ion-row>

      <ion-row class="output-area" #chatArea>
        <ion-col>

          <div class="blank-slate" *ngIf="gameService.messages.length === 0">
            No messages sent... yet!
          </div>
          <ion-list>
            <ng-container *ngIf="gameService.player$ | async as player">
              <ion-item *ngFor="let message of gameService.messages" class="chat-message" (contextmenu)="openPopover(message.realPlayerName, $event)">
                <ion-label class="ion-text-wrap">
                  <h2>
                    <span class="chat-address" *ngIf="player.modTier">{{message.address}}</span>
                    <span class="chat-discord" *ngIf="message.fromDiscord">[Discord]</span>
                    <span class="chat-username" *ngIf="message.playerName !== '☆System' && !message.fromDiscord">
                      <a target="_blank" [href]="gameService.globalLink(message.playerName)">{{ message.playerName }}</a>
                    </span>
                    <span class="chat-username" *ngIf="message.playerName == '☆System' || message.fromDiscord">{{ message.playerName }}</span>
                    <span class="chat-title" *ngIf="message.playerTitle">{{ message.playerTitle }}</span>
                    <span class="chat-guild-tag" *ngIf="message.guildTag"> [{{ message.guildTag }}]</span>
                    <span class="chat-timestamp">{{ message.timestamp | date:'short' }}</span>
                  </h2>
                  <p [innerHTML]="message.message | linkify | replaceDiscordEmoji"></p>
                </ion-label>
              </ion-item>
            </ng-container>
          </ion-list>
        </ion-col>
      </ion-row>

      <ion-row class="input-area">
        <ion-col class="text-entry">
          <ion-item>
            <ion-input placeholder="Type your message here..." (keyup.enter)="send()" [(ngModel)]="message"></ion-input>
          </ion-item>
        </ion-col>

        <ion-col class="button-col">
          <ion-button color="primary" (click)="send()" [disabled]="!message">
            <ion-icon slot="icon-only" name="send"></ion-icon>
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-col>
  </ion-row>
</ion-content>
